<template>
    <div class="common-layout">
        <el-row>
            <el-col :span="24">
                <el-select v-model="state.selected" class="m-2" placeholder="Select" 
                @change="change"
                size="large">
                    <el-option v-for="item in state.options" :key="item" :label="item" :value="item" />
                </el-select>

                <el-text> 数量：{{ state.data.length }} </el-text>

                <copy-stocks-to-clipboard :data="state.data" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
            <el-table :data="state.data" height="700" style="width: 100%"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @cell-click="cellClick"
            :cell-class-name="tableCellClassName"
             >
                <el-table-column prop="stock" label="股票" width="150" fixed>
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="category" label="类别" width="120"/>
                <el-table-column prop="industry" label="行业" sortable show-overflow-tooltip width="150"/>
                <el-table-column v-for="item in state.items" :prop="item" :label="item" :key="item" sortable />
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ToStockDetail from './ToStockDetail.vue';
import { getDailyMonitorData } from '../service/dailyMonitor';
import { range} from '../utils/help';
import CopyStocksToClipboard from './CopyStocksToClipboard.vue';

const base = "DailyMonitor"
const selectKey = base + "Select"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"

const state = reactive({
    options: [],
    rawData: [],
    data: [],
    selected: "",
    operationSelected: "",
    items : [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'weekPct' , 
        order: sessionStorage.getItem(sortOrderKey) || 'ascending' 
    }

})

range(25).forEach(i => {
    state.items.push('l' + (i + 1))
})

const loadData = () => {
    getDailyMonitorData(state.selected).then( res => {
        state.rawData = res.data.data
        state.options = res.data.date.sort().reverse()

        state.data = state.rawData

        state.selected = state.data[0].monitorDate
    })
}

loadData()

const change = () => {
    loadData()
}

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            let property = column.property
            let val =  row[property]
            if (state.items.includes(property)) {
                if (val < 0) {
                    return 'lt0-cell'
                }

                let num = parseInt(property.substring(1))
                if (num < 25 && (val < row["l"+(num+1)])) {
                    return 'wugu-lt10-cell'
                }
            }

            return ''
        }

        const cellClick = (row, column, cell, event) => {
            let columnProperty = column.property
            let val = row[columnProperty]

            if (['industry','category'].includes(columnProperty)) {
                if (state.operationSelected != "" && state.operationSelected == val) {
                    state.operationSelected = ""
                    state.data = state.rawData
                } else {
                    state.operationSelected = val
                    state.data = state.rawData.filter(item => item[columnProperty] == val)
                }
            }

            if (state.items.includes(columnProperty)) {
                if (state.operationSelected != "" && state.operationSelected == columnProperty) {
                    state.operationSelected = ""
                    state.data = state.rawData
                } else {
                    state.operationSelected = columnProperty
                    let num = parseInt(columnProperty.substring(1))
                    state.data = state.rawData.filter(item => item[columnProperty] >= 0 && item["l"+(num+1)] < 0)
                }
            }
        }
</script>